import React, {FC, useMemo} from 'react';
import {ProColumns} from '@ant-design/pro-table';
import {Tag} from 'antd';
import service from './service';
import {SysLoginLogModel} from './data';
import Details from './components/Details';
import ProTableCrud, {ProTableCrudOperate} from '@/components/ProTableCrud';
import useList, {ListOperate} from '@/hooks/useList';
import moment from "moment";
import {formatDate,} from "@/utils/utils";
import {DialogOperate} from "@/global";
import useDialog from "@/hooks/useDialog";

const startDate = moment().subtract(7, 'd');
const endDate = moment();

/** 系统登录日志模块 */
const SysLoginLogPage: FC = () => {
  const detailsOperate = useDialog();
  //List
  const listOperate = useList<SysLoginLogModel>({
    onLoad: (params) => {
      const {operateDateTime, ...rest} = params;
      const operateStartDateTime = (operateDateTime && operateDateTime[0]) || (formatDate(startDate));
      const operateEndDateTime = (operateDateTime && operateDateTime[1]) || (formatDate(endDate));
      return service.selectPageList({...rest, operateStartDateTime, operateEndDateTime});
    },
  });


//表格列
  const cols = useMemo(() => getCols(listOperate, detailsOperate), []);

 //增删改查选项
  const tableOperate: ProTableCrudOperate<SysLoginLogModel> = {
    showToolbar: false,
    showOptionColumn: false,
    cols,
    listOperate,
    detailsOperate,
    getDetailsElement: (props) => (<Details {...props}/>),
  };

  return (
    <ProTableCrud rowSelection={undefined} scroll={{x: 1500}} operate={tableOperate}/>
  );
};



/** 获取表格列 */
function getCols(listOperate: ListOperate<SysLoginLogModel>, detailsOperate: DialogOperate): (ProColumns<SysLoginLogModel>[]) {
  return [
    {
      title: '操作日期',
      dataIndex: 'operateDateTime',
      align: 'center',
      sorter: true,
      width: 170,
      order: 5,
      valueType: 'dateRange',
      initialValue: [startDate, endDate],
      render: (text, r) => (<a onClick={() => detailsOperate.show({id: r.id})}>{text}</a>),
      formItemProps: {
        'placeholder': ['开始日期', '结束日期'],
        'disabledDate': (current: any) => {
          //不能选择大于今天的日期
          return current && current > moment();
        },
      },
    },
    {
      title: '登录类型',
      dataIndex: 'category',
      hideInTable: false,
      hideInSearch: false,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      align: 'center',
      width:80,
      valueEnum: {
        null: {text: '全部类型', status: 'Default'},
        1: {text: '登录'},
        2: {text: '注销', status: 'Error'},
      },
      render: (_, r) => {
        let color  = 'default';
        if (r.category === 1) {
          color = '#5cb85c';
        } else if (r.category === 2) {
          color = '#337ab7';
        }
        return (
          <Tag color={color} key={r.category}>
            {r.category === 1 ? '登录' : '注销'}
          </Tag>
        );
      },
      formItemProps:{
        'placeholder':'全部类型',
        'onSelect': listOperate.handleSearch,
      },
    },
    {
      title: '登录账号',
      dataIndex: 'account',
      hideInTable: false,
      hideInSearch: false,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      align: 'center',
      width:150,
      formItemProps:{
        'placeholder':'登录账号',
      },
    },
    {
      title: '主键',
      dataIndex: 'id',
      hideInTable: true,
      hideInSearch: true,
      ellipsis: true,
      sorter: false,
      filters: undefined,
      align: 'center',
      formItemProps:{
        'placeholder':'主键',
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInTable: false,
      hideInSearch: false,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      align: 'center',
      width:80,
      formItemProps:{
        'placeholder':'全部状态',
        'onSelect': listOperate.handleSearch,
      },
      valueEnum: {
        null: {text: '全部状态', status: 'Default'},
        true: {text: '成功'},
        false: {text: '失败', status: 'Error'},
      },
      render: (_, r) => {
        let color  = 'default';
        if (r.status === true) {
          color = '#5cb85c';
        } else if (r.status === false) {
          color = '#DD001B';
        }
        return (
          <Tag color={color} key={r.category}>
            {r.status === true ? '成功' : '失败'}
          </Tag>
        );
      },
    },
    {
      title: '操作信息',
      dataIndex: 'msg',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      align: 'center',
      formItemProps:{
        'placeholder':'操作信息',
      },
    },
    {
      title: 'IP地址',
      dataIndex: 'ip',
      hideInTable: false,
      hideInSearch: false,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      align: 'center',
      width:130,
      formItemProps:{
        'placeholder':'IP地址',
      },
    },
    {
      title: 'IP地点',
      dataIndex: 'ipLocation',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      align: 'center',
      width:130,
      formItemProps:{
        'placeholder':'IP地点',
      },
    },
    {
      title: '浏览器',
      dataIndex: 'browser',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      align: 'center',
      width:150,
      formItemProps:{
        'placeholder':'浏览器',
      },
    },
    {
      title: '操作系统',
      dataIndex: 'os',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      align: 'center',
      width:120,
      formItemProps:{
        'placeholder':'操作系统',
      },
    },
    {
      title: '应用主键',
      dataIndex: 'appId',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      align: 'center',
      width:120,
      formItemProps:{
        'placeholder':'应用主键',
      },
    },
    {
      title: '应用名称',
      dataIndex: 'appName',
      hideInTable: false,
      hideInSearch: true,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      align: 'center',
      width:120,
      formItemProps:{
        'placeholder':'应用名称',
      },
    },
  ]
}

export default SysLoginLogPage;

